import React, { Component } from "react";
import "./TodoList.less";
import { Input, Row, Col, List, Button, Checkbox, Modal, message } from "antd";
// Reference storage module
import storage from "../model/storage";

const { Search } = Input;

export default class Todolist extends Component {
  constructor(props) {
    super(props);

    this.state = {
      // todolist
      todoList: [],
      editTodo: "",
      editTodoItem: "",
      visible: false
    };
  }

  // get todolist data
  componentDidMount() {
    const todoList = storage.get("todoList");
    if (todoList) {
      this.setState({
        todoList: todoList
      });
    }
  }

  // add todolist
  addTodo(e) {
    if (e === "") {
      message.warning("todo can't be empty");
    } else {
      const item = {
        content: e,
        checked: false
      };

      const todoList = this.state.todoList;
      todoList.push(item);
      this.setState({
        todoList: todoList
      });

      // return empty
      this.refs["content"].input.state.value = "";
      // Using storage to cache data
      storage.set("todoList", todoList);
    }
  }

  // edit todolist
  editorTodo(item, index) {
    let editTodo = this.state.editTodo;
    editTodo = item.content;
    let editTodoItem = this.state.editTodoItem;
    editTodoItem = index;
    this.setState({
      editTodo: editTodo,
      editTodoItem: editTodoItem,
      visible: true
    });
  }
  // change edit todolist
  changeTodo(e) {
    let editTodo = this.state.editTodo;
    editTodo = e.target.value;
    this.setState({
      editTodo: editTodo
    });
  }
  // Confirm the editor
  handleOk = e => {
    const todoList = this.state.todoList;
    todoList[this.state.editTodoItem].content = this.state.editTodo;
    let editTodo = "";
    editTodo = "";
    this.setState({
      todoList: todoList,
      editTodo: editTodo,
      visible: false
    });

    // return empty
    this.refs["edit"].state.value = "";
    // Using storage to cache data
    storage.set("todoList", todoList);
  };
  // Cancel the editor
  handleCancel = e => {
    this.setState({
      editTodo: "",
      visible: false
    });
  };

  // delete todolist
  deleteTodo(index) {
    const todoList = this.state.todoList;
    todoList.splice(index, 1);
    this.setState({
      todoList: todoList
    });

    // Using storage to cache data
    storage.set("todoList", todoList);
  }

  // add Completed TodoList
  changeTodoState(id, e) {
    console.log(e.target.checked, id);
    const todoList = this.state.todoList;
    todoList[id].checked = !todoList[id].checked;
    this.setState({
      todoList: todoList
    });

    // Using storage to cache data
    storage.set("todoList", todoList);
  }

  render() {
    const ul_item = {
      bom: {
        marginBottom: 0
      }
    };
    return (
      <div className="TodoList">
        {/* header */}
        <div className="header">Welcome to your TodoList!</div>

        {/* section */}
        <div className="section">
          <div className="section_top">
            <Row>
              <Col span={8}>
                <span className="section_top_title">Add things to do</span>
              </Col>
              <Col span={12}>
                <Search
                  placeholder="input todo"
                  enterButton="add"
                  size="large"
                  ref="content"
                  onSearch={this.addTodo.bind(this)}
                />
              </Col>
            </Row>
          </div>
          <div className="section_middle">
            <Modal
              title="Basic Modal"
              visible={this.state.visible}
              onOk={this.handleOk}
              onCancel={this.handleCancel}
            >
              <Input
                placeholder={this.state.editTodo}
                defaultValue=""
                ref="edit"
                onChange={this.changeTodo.bind(this)}
              />
            </Modal>
            <List
              className="section_middle_list"
              header={<div className="list_title">Your TodoList</div>}
              bordered
            >
              <ul style={ul_item.bom}>
                {this.state.todoList.map((item, index) => {
                  if (!item.checked) {
                    return (
                      <li className="section_middle_list_item" key={index}>
                        <div className="item_content">
                          <Checkbox
                            checked={item.checked}
                            onChange={this.changeTodoState.bind(this, index)}
                          ></Checkbox>
                          <span>{item.content}</span>
                        </div>
                        <div className="item_btn">
                          <Button
                            type="primary"
                            size="small"
                            className="btns"
                            onClick={this.editorTodo.bind(this, item, index)}
                          >
                            edit
                          </Button>
                          <Button
                            type="danger"
                            size="small"
                            className="btns"
                            onClick={this.deleteTodo.bind(this, index)}
                          >
                            delete
                          </Button>
                        </div>{" "}
                      </li>
                    );
                  } else {
                    return "";
                  }
                })}
              </ul>
            </List>
          </div>
          <div className="section_middle">
            <List
              className="section_middle_list"
              header={<div className="list_title">Your Completed TodoList</div>}
              bordered
            >
              <ul style={ul_item.bom}>
                {this.state.todoList.map((item, index) => {
                  if (item.checked) {
                    return (
                      <li className="section_middle_list_item" key={index}>
                        <div className="item_content">
                          <span>{item.content}</span>
                        </div>
                        <div className="item_btn">
                          <Button
                            type="danger"
                            size="small"
                            className="btns"
                            onClick={this.deleteTodo.bind(this, index)}
                          >
                            delete
                          </Button>
                        </div>{" "}
                      </li>
                    );
                  } else {
                    return "";
                  }
                })}
              </ul>
            </List>
          </div>
        </div>
      </div>
    );
  }
}
